<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.js"></script>
    <script src="https://cdn.staticfile.org/vue-router/3.5.3/vue-router.js"></script>
    <style>
      .router-link-exact-active {
        color: red;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <router-link to="/">Go to Home</router-link> |
        <router-link to="/about">Go to About</router-link> |
        <router-link to="/456">Go to 456</router-link>
        <!-- 不要直接写a链接 路由有两种模式 vue默认 就是 hash -->
        <!-- // 自动设置 class 属性值 .router-link-active -->
      </p>
      <hr />
      <p>
        <router-link to="/xx/yy">/xx/yy</router-link>
        <router-link to="/xx/zz">/xx/zz</router-link>
      </p>
      <hr />
      <p>
        <router-link to="/post/123">/post/123</router-link>
        <router-link to="/post/456">/post/456</router-link>
      </p>
      <p>
        <router-link to="/user?name=nick">/user?name=nick</router-link>
        <router-link to="/user?name=mark">/user?name=mark</router-link>
      </p>

      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <hr />
      <router-view></router-view>
    </div>
    <script>
      const Home = { template: "<div>Home</div>" };
      const About = { template: "<div>About</div>" };
      const Test = {
        template: "<div>456</div>",
        created: function () {
          console.log(this, this.$router, this.$route);
        },
      };

      new Vue({
        el: "#app",
        router: new VueRouter({
          mode: "hash",
          // mode: "history",
          routes: [
            { path: "/", component: Home },
            { path: "/about", component: About },
            { path: "/456", component: Test },
            { path: "/xx/yy", component: { template: "<div>/xx/yy</div>" } },
            { path: "/xx/zz", component: { template: "<div>/xx/zz</div>" } },

            {
              path: "/post/:iid",
              component: {
                template: "<div>/post/xxx {{$route.params}}</div>",
                created: function () {
                  console.log(this.$route);
                },
                // 因为post/123 和 post/456使用的是同一个组件
                // 所以切换路由 组件并没有销毁再重建 所以created不会再次触发
                watch: {
                  $route: function (n) {
                    console.log(n);
                  },
                },
              },
            },

            {
              path: "/user",
              component: { template: "<div>user {{$route.query}}</div>" },
            },

            {
              path: "*",
              component: { template: "<div>404</div>" },
            },
          ],
        }),
      });

      // vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

      // history.pushState({}, '', "/xxx/yyy")
      // 改变路径 但是不刷新（加载）页面

      // hash 模式长得丑 url长 但是 好用简单
      // history url短 看起来像真的 链接 好看  容易404（解决404 任何不存在的页面都返回首页）

      // 通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：

      // https://www.jianshu.com/p/c349471bdef7  看起来像是p目录有一个文件c349471bdef7 静态url  有利SEO
      // https://item.taobao.com/item.htm?id=652582504306  看上去就知道没有文件 动态url
      // 技术层面 没有区别

      // .html  .htm .shtml
    </script>
  </body>
</html>
